<template>
	<view class="user-perfetion-page" v-cloak>
		<!-- label-position="top" -->
		<uni-forms ref="form" :modelValue="fromData" :rules="rules" label-position="top" :label-width="90">
			<uni-forms-item label="企业名称" required name="company_name">
				<uni-easyinput type="text" v-model="fromData.company_name" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="法定代表人" name="legalperson">
				<uni-easyinput type="text" v-model="fromData.legalperson" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="职工人数" name="people">
				<uni-easyinput type="text" v-model="fromData.people" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="企业性质" name="nature">
				<uni-easyinput type="text" v-model="fromData.nature" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="农业分类" required name="classification">
				<uni-data-checkbox v-model="fromData.classification" multiple :localdata="industrylist" />
			</uni-forms-item>
			<picker @change="areaChange" :value="areaindex" :range="addresslist" range-key="title">
				<uni-forms-item label="所属区域" name="address">
					<uni-easyinput type="text" v-model="fromData.address" placeholder="请选择" />
				</uni-forms-item>
			</picker>
			<div @click="chooseLocation()">
				<uni-forms-item label="公司地址" name="manage">
					<div class="input">
						{{doorplate?doorplate:'请选择公司地址'}}
					</div>
					<i class="Ticonfont Ticon-113fangxiang_xiangyou"></i>
				</uni-forms-item>
			</div>

			<uni-forms-item label="企业图册" name="name">
				<uni-file-picker limit="6" v-model="fromData.cover" @select="select" @delete="handleDelete"
					@fail="fail"></uni-file-picker>
			</uni-forms-item>
			<div style='margin-top: 10rx;height: 150rpx;'></div>
			<div class="foot">
				<button class="submit" @click="submit">提交</button>
			</div>


		</uni-forms>
	</view>
</template>

<script>
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		data() {
			return {
				industrylist: [],
				areaindex: 0,
				addresslist: [],
				index: 0,
				fromData: {
					company_name: null,
					legalperson: null,
					people: null,
					nature: null,
					classification: '',
					address: null,
					company_address: null,
					doorplate: null,
					latitude: null,
					longitude: null,
					cover: [],
				},
				doorplate: null,
				rules: {
					company_name: {
						rules: [{
							required: true,
							errorMessage: '请填写企业名称',
						}, ],
					}
				},
				// range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]

			};
		},
		components: {
			RboyUploadSfz,
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules);
			this.getlist();
			this.getdetail();
		},
		methods: {
			getdetail() {
				this.$H.get('/company/get').then(res => {
					if (res.data && res.data.detail) {
						this.fromData = res.data.detail
					}
					// 
				})
			},
			getlist() {
				this.$H.get('/company/industrylist', this.data).then(res => {
					console.log(res.data.list)
					let data = res.data.list
					this.industrylist = data.map(v => {
						return {
							value: v.value,
							text: v.label
						}
					})
					console.log(this.industrylist)

				})
				this.$H.get('/company/addresslist', this.data).then(res => {
					let data = res.data.list
					this.addresslist = data.map(v => {
						return {
							value: v.value,
							title: v.label
						}
					})
					console.log(this.addresslist)

				})
			},
			// 上传
			sfz_chagne(e) {
				console.log(e)
				if (e.name == "obverse") {
					this.fromData.obverseUrl = e.tempFilePath
				} else if (e.name == "reverse") {
					this.fromData.reverseUrl = e.tempFilePath
				}
			},
			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.fromData.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.fromData.reverseUrl = ""
				}
			},
			// 表单提交
			submit(form) {
				this.$refs.form.validate().then(res => {
					this.$H.post('/company/edit', {
						form: this.fromData
					}).then(res => {
						if (res.status == 500) {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							// 刷新验证码
							this.captcha();
						}
						if (res.status == 200) {
							uni.showToast({
								icon: "success",
								title: res.message
							})

							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my',
								})
							}, 2000)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.fromData.classification = this.industrylist[this.index].title
			},


			// 区域选则
			areaChange(e) {
				this.areaindex = e.detail.value
				this.fromData.address = this.addresslist[this.areaindex].title
			},

			// 选择地址获取经纬度
			chooseLocation() {
				console.log(2323)
				uni.chooseLocation({
					success: res => {
						// console.log(res)
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						this.fromData.company_address = res.name
						this.fromData.doorplate = res.address
						this.doorplate = res.address
						this.fromData.latitude = res.latitude
						this.fromData.longitude = res.longitude

					}
				});
			},

			// 照片列表上传的记录
			select(e) {
				this.tempFilePaths = e.tempFilePaths
				this.upload(this.tempFilePaths, 0)
			},

			// 上传失败
			fail(e) {
				uni.showToast({
					title: '上传异常',
					icon: 'success'
				});
			},

			/*
			 *tempFilePaths上传附件的列表
			 *type 0照片 1附件
			 */
			upload(tempFilePaths) {
				if (this.tempFilePaths.length == 0) {
					return false
				}
				this.uploadFilePromise(tempFilePaths[0]);
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: '/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"Access-Token": uni.getStorageSync('token'),
							"storeId": 10001,
							"platform": "h5"
						},
						success: (res) => {
							let info = JSON.parse(res.data);
							if (info.status == 200) {
								this.tempFilePaths.splice(0, 1); //删除数组的第1个 因为已经提交好了
								this.fromData.cover.push({
									"url": info.data.fileInfo.external_url,
								});

								this.upload(this.tempFilePaths)
							}
						}
					});
				})
			},
			handleDelete(err) { // 删除图片
				const num = this.fromData.findIndex(v => v.temp === err.tempFilePath);
				this.fromData.cover.splice(num, 1);
			},

		}
	}
</script>

<style scoped='scss' scoped>
	.user-perfetion-page {
		padding: 30px 30rpx;
		box-sizing: border-box;
	}

	.foot {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		height: 150rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit {
		width: 600rpx;
		height: 92rpx;
		background: #17BF8B;
		border-radius: 46rpx;
		color: #fff;


	}

	.input {
		/* border-color: rgb(229, 229, 229); */
		background-color: rgb(255, 255, 255);
		border: 1px solid rgb(229, 229, 229);
		height: 70rpx;
		padding: 0px 10rpx;
		line-height: 70rpx;
		color: #666;
		border-radius: 10rpx;
		background: #f1f1f1;
	}

	/deep/ .uni-easyinput__content-input {
		background: #f1f1f1;
	}
</style>